<template>
  <div>
    <div class="order_content">
      <!-- 我下的订单 -->
      <div class="bread">
        我的订单
        <span style="color:#777;">
          <span style="fontSize:12px;">>></span>
          我下的订单
        </span>
      </div>
      <div class="table">
        <div class="order_table_title">
          <div class="order_id">订单编号</div>
          <div class="order_seller">卖家</div>
          <div class="order_detail">书籍详情</div>
          <div class="order_date">下单时间</div>
          <div class="order_buyer">收货人</div>
          <div class="order_num">购买数量</div>
          <div class="order_price">订单金额</div>
          <div class="order_express">送货方式</div>
          <div class="order_status">订单状态</div>
          <div class="order_caozuo">操作</div>
        </div>
        <div class="order_box" v-if="orderBuyList.length !== 0">
          <ul v-for="item in orderBuyList" :key="item.order_id">
            <li class="table_content">
              <div class="order_id">{{ item.order_id }}</div>
              <div class="order_seller" style="color:#d2ac6b">
                {{ item.order_seller }}
              </div>
              <div class="order_detail">
                <img :src="baseURL + item.order_book_cover" alt="" />
                {{ item.order_book_name }}
              </div>
              <div class="order_date">{{ item.order_date }}</div>
              <div class="order_buyer">{{ item.order_buyer }}</div>
              <div class="order_buyer">{{ item.order_num }}</div>
              <div class="order_price">{{ item.order_price }}</div>
              <div class="order_express">快递</div>
              <div class="order_status">{{ item.order_status }}</div>
              <div class="order_caozuo">
                <div
                  class="caozuo_detail"
                  @click="showOrderDetail(item.order_id, item.order_buyer)"
                >
                  查看
                </div>
                <div class="caozuo_box">
                  <div
                    class="caozuo_detail"
                    v-if="item.order_status == '订单已提交,待卖家确认'"
                    @click="cancelOrder(item.order_id)"
                  >
                    取消订单
                  </div>
                  <div
                    class="caozuo_detail"
                    v-if="item.order_status == '卖家已确认订单,待付款'"
                    @click="payOrder(item.order_id)"
                  >
                    付款
                  </div>
                  <div
                    class="caozuo_detail"
                    v-if="item.order_status == '卖家已发货,待买家确认收货'"
                    @click="confirmGetOrder(item.order_id)"
                  >
                    确认收货
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="order_box" v-else>
          <div class="zanwu">暂无数据</div>
        </div>
      </div>
      <!-- 分割线 -->
      <div class="line"></div>
      <!-- 我收到的订单 -->
      <div class="bread">
        我的订单
        <span style="color:#777;">
          <span style="fontSize:12px;">>></span>
          我收到的订单
        </span>
      </div>
      <div class="table">
        <div class="order_table_title">
          <div class="order_id">订单编号</div>
          <div class="order_seller">卖家</div>
          <div class="order_detail">书籍详情</div>
          <div class="order_date">下单时间</div>
          <div class="order_buyer">收货人</div>
          <div class="order_num">购买数量</div>
          <div class="order_price">订单金额</div>
          <div class="order_express">送货方式</div>
          <div class="order_status">订单状态</div>
          <div class="order_caozuo">操作</div>
        </div>
        <div class="order_box" v-if="orderSellList.length !== 0">
          <ul v-for="item in orderSellList" :key="item.order_id">
            <li class="table_content">
              <div class="order_id">{{ item.order_id }}</div>
              <div class="order_seller" style="color:#d2ac6b">
                {{ item.order_seller }}
              </div>
              <div class="order_detail">
                <img :src="baseURL + item.order_book_cover" alt="" />
                {{ item.order_book_name }}
              </div>
              <div class="order_date">{{ item.order_date }}</div>
              <div class="order_buyer">{{ item.order_buyer }}</div>
              <div class="order_buyer">{{ item.order_num }}</div>
              <div class="order_price">{{ item.order_price }}</div>
              <div class="order_express">快递</div>
              <div class="order_status">{{ item.order_status }}</div>
              <div class="order_caozuo">
                <div
                  class="caozuo_detail"
                  v-if="item.order_status == '订单已提交,待卖家确认'"
                  @click="confirmOrder(item.order_id)"
                >
                  确认订单
                </div>
                <div
                  class="caozuo_detail"
                  v-if="item.order_status == '买家已付款,待卖家发货'"
                  @click="confirmSendOrder(item.order_id)"
                >
                  确认发货
                </div>
                <div
                  class="caozuo_detail"
                  @click="showOrderDetail(item.order_id, item.order_buyer)"
                >
                  查看
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="order_box" v-else>
          <div class="zanwu">暂无数据</div>
        </div>
      </div>
    </div>

    <el-dialog title="订单详情" :visible.sync="detailDialogVisible" width="50%">
      <div class="order_detail_top">订单号:{{ order_detail.order_id }}</div>
      <div>
        <div class="order_detail_top">
          订单状态: {{ order_detail.order_status }}
        </div>
      </div>
      <div>
        <div class="order_detail_title">收货人信息</div>
        <div class="order_detail_box">
          <div>收货人:{{ buyer_detail.consignee }}</div>
          <div>手机:{{ buyer_detail.address_phone }}</div>
          <div>邮编:{{ buyer_detail.postcode }}</div>
          <div>所在省市区:{{ buyer_detail.province }}</div>
          <div>详细地址:{{ buyer_detail.address }}</div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { CodeToText } from 'element-china-area-data'
export default {
  data() {
    return {
      // 订单列表
      flag: false,
      orderBuyList: [],
      orderSellList: [],
      baseURL: 'http://127.0.0.1:3000/',
      detailDialogVisible: false,
      // 订单弹出框内容
      order_detail: {},
      buyer_detail: {}
    }
  },
  created() {
    this.getOrder()
  },
  methods: {
    // 获取订单信息
    async getOrder() {
      const { data: resBuy } = await this.$http.get(
        '/order/getBuyOrder' + '/' + this.getUser
      )
      const { data: resSell } = await this.$http.get(
        '/order/getSellOrder' + '/' + this.getUser
      )
      if (resBuy.code !== 200) {
        return this.$message.error('获取购买订单信息失败')
      }
      if (resSell.code !== 200) {
        return this.$message.error('获取出售订单信息失败')
      }
      this.orderBuyList = resBuy.data
      this.orderSellList = resSell.data
      this.orderBuyList.forEach(item => {
        switch (item.order_status) {
          case 0:
            item.order_status = '订单已取消'
            break
          case 1:
            item.order_status = '订单已提交,待卖家确认'
            break
          case 2:
            item.order_status = '卖家已确认订单,待付款'
            break
          case 3:
            item.order_status = '买家已付款,待卖家发货'
            break
          case 4:
            item.order_status = '卖家已发货,待买家确认收货'
            break
          case 5:
            item.order_status = '买家已确认收货'
            break
          case 6:
            item.order_status = '交易完成'
            break
        }
      })
      this.orderSellList.forEach(item => {
        switch (item.order_status) {
          case 0:
            item.order_status = '订单已取消'
            break
          case 1:
            item.order_status = '订单已提交,待卖家确认'
            break
          case 2:
            item.order_status = '卖家已确认订单,待付款'
            break
          case 3:
            item.order_status = '买家已付款,待卖家发货'
            break
          case 4:
            item.order_status = '卖家已发货,待买家确认收货'
            break
          case 5:
            item.order_status = '买家确认收货'
            break
          case 6:
            item.order_status = '交易完成'
            break
        }
      })
      console.log(this.orderBuyList)
      console.log(this.orderSellList)
    },
    // 查看订单
    async showOrderDetail(orderId, orderBuyer) {
      this.detailDialogVisible = true
      const { data: res } = await this.$http.get(
        '/order/getOrderById' + '/' + orderId
      )
      this.order_detail = res.data[0]
      switch (this.order_detail.order_status) {
        case 0:
          this.order_detail.order_status = '订单已取消'
          break
        case 1:
          this.order_detail.order_status = '订单已提交,待卖家确认'
          break
        case 2:
          this.order_detail.order_status = '卖家已确认订单,待付款'
          break
        case 3:
          this.order_detail.order_status = '买家已付款,待卖家发货'
          break
        case 4:
          this.order_detail.order_status = '卖家已发货,待买家确认收货'
          break
        case 5:
          this.order_detail.order_status = '买家已确认收货'
          break
        case 6:
          this.order_detail.order_status = '交易完成'
          break
      }
      console.log(this.order_detail)
      const { data: resBuyer } = await this.$http.get(
        '/address/getAddressByName' + '/' + orderBuyer
      )
      if (resBuyer.data[0] !== undefined) {
        this.buyer_detail = resBuyer.data[0]
        let arr = this.buyer_detail.province.split(',')
        let data =
          CodeToText[arr[0]] +
          ', ' +
          CodeToText[arr[1]] +
          ', ' +
          CodeToText[arr[2]]
        this.buyer_detail.province = data.replaceAll(',', '')
      }
      console.log(this.buyer_detail)
    },
    // 取消订单
    async cancelOrder(orderId) {
      const confirmResult = await this.$confirm('确定取消订单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confirmResult !== 'confirm') return
      const { data: res } = await this.$http.put('/order/updateOrder', {
        order_status: 0,
        order_id: orderId
      })
      if (res.code !== 200) return this.$message.error('取消订单失败')
      this.$message.success('取消订单成功')
      this.getOrder()
    },
    // 卖家确认订单
    async confirmOrder(orderId) {
      const confirmResult = await this.$confirm(
        '确认该订单无误,可以发货?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)
      if (confirmResult !== 'confirm') return
      const { data: res } = await this.$http.put('/order/updateOrder', {
        order_status: 2,
        order_id: orderId
      })
      if (res.code !== 200) return this.$message.error('确认订单失败')
      this.$message.success('确认订单成功')
      this.getOrder()
    },
    // 买家付款
    async payOrder(orderId) {
      const confirmResult = await this.$confirm('确认付款成功?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confirmResult !== 'confirm') return
      const { data: res } = await this.$http.put('/order/updateOrder', {
        order_status: 3,
        order_id: orderId
      })
      if (res.code !== 200) return this.$message.error('付款失败')
      this.$message.success('付款成功')
      this.getOrder()
    },
    // 卖家确认发货
    async confirmSendOrder(orderId) {
      const confirmResult = await this.$confirm('确认已发货成功?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confirmResult !== 'confirm') return
      const { data: res } = await this.$http.put('/order/updateOrder', {
        order_status: 4,
        order_id: orderId
      })
      if (res.code !== 200) return this.$message.error('确认发货失败')
      this.$message.success('确认发货成功')
      this.getOrder()
    },
    // 确认收货
    async confirmGetOrder(orderId) {
      const confirmResult = await this.$confirm('是否确认收货?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confirmResult !== 'confirm') return
      const { data: res } = await this.$http.put('/order/updateOrder', {
        order_status: 6,
        order_id: orderId
      })
      if (res.code !== 200) return this.$message.error('确认收货失败')
      this.$message.success('确认收货成功')
      this.getOrder()
    },
    // 发货
    sendOrder() {}
  },
  computed: {
    ...mapGetters('user', ['getUser'])
  }
}
</script>

<style lang="scss" scoped>
.order_content {
  width: 980px;
  margin: 0 auto;
  background-color: #fff;
}
.bread {
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  margin: 0px;
  padding: 10px;
  color: rgb(210, 172, 107);
  border-bottom: 1px solid rgb(222, 222, 222);
  background-color: rgb(255, 255, 255);
}
.line {
  height: 40px;
  background-color: rgb(245, 245, 245);
}
.order_table_title {
  display: flex;
  align-items: center;
  height: 28px;
  padding-left: 20px;
  border-bottom: 1px solid rgb(222, 222, 222);
  color: #777;
  font-weight: bolder;
  font-size: 12px;
}
.table_content {
  padding-left: 20px;
  display: flex;
  height: 65px;
  line-height: 65px;
  border-bottom: 1px solid #ccc;
  background-color: #fff;
  font-size: 12px;
  color: rgb(107, 107, 107);
}
.order_id {
  width: 125px;
}
.order_seller {
  width: 80px;
}
.order_detail {
  width: 250px;
  img {
    width: 40px;
    height: 50px;
    border: 1px solid rgb(222, 222, 222);
    padding: 2px;
    vertical-align: middle;
    margin-right: 10px;
  }
}
.order_date {
  width: 155px;
}
.order_buyer {
  width: 66px;
}
.order_num {
  width: 80px;
}
.order_price {
  width: 80px;
}
.order_express {
  width: 80px;
}
.order_status {
  width: 180px;
}
.order_caozuo {
  width: 60px;
}
// .caozuo_box {
//   display: flex;
//   flex-direction: column;
//   height: 65px;
//   line-height: 65px;
// }
.caozuo_detail {
  color: rgb(210, 172, 107);
  cursor: pointer;
  height: 20px;
}
.texc {
  text-align: center;
}
.zanwu {
  text-align: center;
  font-size: 12px;
  color: #777;
  font-style: italic;
  height: 40px;
  line-height: 40px;
}
// 订单详情
.order_detail_top {
  font-size: 18px;
}
.order_detail_title {
  font-size: 20px;
  margin: 10px 0 10px 2px;
  padding-left: 4px;
  font-weight: bold;
  border-left: 4px solid rgb(0, 128, 128);
}
.order_detail_box {
  padding: 10px;
  div {
    height: 25px;
    line-height: 25px;
  }
}
</style>
